<template>
  <div>
    <el-tabs type="border-card">

      <el-tab-pane label="设备报修">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="报修姓名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <!--      <el-form-item label="报修地址">-->
          <!--&lt;!&ndash;        <span class="demonstration">报修地址</span>&ndash;&gt;-->
          <!--        <el-cascader-->
          <!--            v-model="value"-->
          <!--            :options="options"-->
          <!--            @change="handleChange"></el-cascader>-->
          <!--      </el-form-item>-->

          <el-form-item label="报修地址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item label="上门时间">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="加急报修">
            <el-switch v-model="form.delivery"></el-switch>
          </el-form-item>
          <el-form-item label="联系方式" style="width: 50%">
            <el-input  placeholder="请输入手机号码" v-model="form.phonenum"></el-input>
          </el-form-item>
          <el-form-item label="故障描述">
            <el-input type="textarea" v-model="form.note"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>




      <el-tab-pane label="进度查询">



        <div>
          <div>
            <el-input style="width: 200px" placeholder="查询手机号" v-model="phonenum"></el-input>
            <el-button type="primary" style="margin-left: 10px" @click="load(1)">查询</el-button>
            <el-button type="info" @click="reset">重置</el-button>
          </div>
          <div style="margin: 10px 0">

            <el-button type="danger" plain @click="delBatch">批量删除</el-button>

          </div>
          <el-table :data="tableData" stripe :header-cell-style="{ backgroundColor: 'aliceblue', color: '#666' }" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="id" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="phonenum" label="手机号"></el-table-column>
            <el-table-column prop="time" label="报修时间"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column prop="note" label="故障详情" show-overflow-tooltip></el-table-column>
            <el-table-column prop="status" label="订单状态" width="70">
              <template v-slot="scope">
                <el-tag type="info" v-if="scope.row.status === '未处理'">未处理</el-tag>
                <el-tag type="warning" v-if="scope.row.status === '处理中'">处理中</el-tag>
                <el-tag type="success" v-if="scope.row.status === '已完成'">已完成</el-tag>
                <!-- 根据实际状态添加更多的条件渲染 -->
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="220">
              <template v-slot="scope">

                <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>

              </template>
            </el-table-column>
          </el-table>

          <div style="margin: 10px 0">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="total">
            </el-pagination>
          </div>


        </div>


<!--        <el-steps :space="200" :active="0" finish-status="success">-->
<!--          <el-step title="未处理"></el-step>-->
<!--          <el-step title="处理中"></el-step>-->
<!--          <el-step title="已完成"></el-step>-->
<!--        </el-steps>-->
      </el-tab-pane>
<!--      <el-tab-pane label="服务评价">角色管理</el-tab-pane>-->

    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "Repair",
  data() {
    return {
      form: {
        name: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        address: ''
      },
      user: JSON.parse(localStorage.getItem('honey-user') || '{}'),


      options: [{
        value: '未处理',
        label: '未处理'
      }, {
        value: '处理中',
        label: '处理中'
      }, {
        value: '已完成',
        label: '已完成'
      }],
      value: '',

      tableData: [],  // 所有的数据
      pageNum: 1,   // 当前的页码
      pageSize: 6,  // 每页显示的个数
      phonenum: '',
      title: '',
      total: 0,
      fromVisible: false,

      rules: {
        phonenum: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
        ],

      },
      ids: [],
      content: '',


    };


  },

  methods: {
    onSubmit() {
      console.log('submit!'),
          this.$request({
            url: this.form.id ? '/repair/update' : '/repair/add',
            method: this.form.id ? 'PUT' : 'POST',
            data: this.form
          }).then(res => {
            if (res.code === '200') {  // 表示成功保存
              this.$message.success('保存成功')


            } else {
              this.$message.error(res.msg)  // 弹出错误的信息
            }
          })
    },
    handleChange(value) {


      console.log(value);
    },

    changeOpen(form) {
      // 调用更新的接口  更新数据到数据库
      this.form = JSON.parse(JSON.stringify(form))
      this.sendSaveRequest()   // 直接发请求就可以了
    },
    delBatch() {
      if (!this.ids.length) {
        this.$message.warning('请选择数据')
        return
      }
      this.$confirm('您确认批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/repair/delete/batch', {data: this.ids}).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('操作成功')
            this.load(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
    handleSelectionChange(rows) {   // 当前选中的所有的行数据
      this.ids = rows.map(v => v.id)
    },
    del(id) {
      this.$confirm('您确认删除吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/repair/delete/' + id).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('操作成功')
            this.load(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
    handleEdit(row) {   // 编辑数据
      this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
      this.fromVisible = true   // 打开弹窗
    },
    handleAdd() {   // 新增数据
      this.form = {}  // 新增数据的时候清空数据
      this.fromVisible = true   // 打开弹窗
    },
    save() {   // 保存按钮触发的逻辑  它会触发新增或者更新
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.sendSaveRequest()
        }
      })
    },
    sendSaveRequest() {
      this.$request({
        url: this.form.id ? '/repair/update' : '/repair/add',
        method: this.form.id ? 'PUT' : 'POST',
        data: this.form
      }).then(res => {
        if (res.code === '200') {  // 表示成功保存
          this.$message.success('保存成功')
          this.load(1)
          this.fromVisible = false
        } else {
          this.$message.error(res.msg)  // 弹出错误的信息
        }
      })
    },
    reset() {
      this.phonenum = ''
      this.load()
    },

    handleDropdownCommand(command) {
      // 根据传入的命令调用相应的方法
      this[command]();
    },
    preHandle() {

      this.loadByStatus('未处理', 1);

    },

    loadByStatus(status, pageNum) {
      // 更新当前页码和状态
      this.pageNum = pageNum;
      this.status = status;
      // 加载数据
      this.prehandle(pageNum);
    },


    prehandle(pageNum) {
      if (pageNum) this.pageNum = pageNum
      this.$request.get('/repair/selectByPageStatus', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          status: this.status
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },

    Handling() {
      this.loadByStatusHandling('处理中', 1);
    },
    loadByStatusHandling(status, pageNum) {
      this.pageNum = pageNum;
      this.status = status;
      this.handling(pageNum);
    },
    handling(pageNum) {
      if (pageNum) this.pageNum = pageNum
      this.$request.get('/repair/selectByPageStatusHandling', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          status: this.status
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },

    Handled() {
      this.loadByStatusHandled("已完成", 1);
    },
    loadByStatusHandled(status, pageNum) {
      this.pageNum = pageNum;
      this.status = status;
      this.handled(pageNum);
    },
    handled(pageNum) {
      if (pageNum) this.pageNum = pageNum
      this.$request.get('repair/selectByPageStatusHandled', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          status: this.status
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },

    load(pageNum) {  // 分页查询
      if (pageNum) this.pageNum = pageNum
      this.$request.get('/repair/selectByPages', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          username: this.phonenum
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },




    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
  },

  changeOpen(form) {
    // 调用更新的接口  更新数据到数据库
    this.form = JSON.parse(JSON.stringify(form))
    this.sendSaveRequest()   // 直接发请求就可以了
  },
  delBatch() {
    if (!this.ids.length) {
      this.$message.warning('请选择数据')
      return
    }
    this.$confirm('您确认批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
      this.$request.delete('/repair/delete/batch', { data: this.ids }).then(res => {
        if (res.code === '200') {   // 表示操作成功
          this.$message.success('操作成功')
          this.load(1)
        } else {
          this.$message.error(res.msg)  // 弹出错误的信息
        }
      })
    }).catch(() => {})
  },
  handleSelectionChange(rows) {   // 当前选中的所有的行数据
    this.ids = rows.map(v => v.id)
  },
  del(id) {
    this.$confirm('您确认删除吗？', '确认删除', {type: "warning"}).then(response => {
      this.$request.delete('/repair/delete/' + id).then(res => {
        if (res.code === '200') {   // 表示操作成功
          this.$message.success('操作成功')
          this.load(1)
        } else {
          this.$message.error(res.msg)  // 弹出错误的信息
        }
      })
    }).catch(() => {})
  },
  handleEdit(row) {   // 编辑数据
    this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
    this.fromVisible = true   // 打开弹窗
  },
  handleAdd() {   // 新增数据
    this.form = {}  // 新增数据的时候清空数据
    this.fromVisible = true   // 打开弹窗
  },
  save() {   // 保存按钮触发的逻辑  它会触发新增或者更新
    this.$refs.formRef.validate((valid) => {
      if (valid) {
        this.sendSaveRequest()
      }
    })
  },
  sendSaveRequest() {
    this.$request({
      url: this.form.id ? '/repair/update': '/repair/add',
      method: this.form.id ? 'PUT' : 'POST',
      data: this.form
    }).then(res => {
      if (res.code === '200') {  // 表示成功保存
        this.$message.success('保存成功')
        this.load(1)
        this.fromVisible = false
      } else {
        this.$message.error(res.msg)  // 弹出错误的信息
      }
    })
  },
  reset() {
    this.phonenum = ''
    this.load()
  },

  handleDropdownCommand(command) {
    // 根据传入的命令调用相应的方法
    this[command]();
  },
  preHandle() {

    this.loadByStatus('未处理', 1);

  },

  loadByStatus(status, pageNum) {
    // 更新当前页码和状态
    this.pageNum = pageNum;
    this.status = status;
    // 加载数据
    this.prehandle(pageNum);
  },


  prehandle(pageNum){
    if(pageNum) this.pageNum = pageNum
    this.$request.get('/repair/selectByPageStatus',{
      params: {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: this.status
      }
    }).then(res => {
      this.tableData = res.data.records
      this.total = res.data.total
    })
  },

  Handling(){
    this.loadByStatusHandling('处理中', 1);
  },
  loadByStatusHandling(status, pageNum){
    this.pageNum = pageNum;
    this.status = status;
    this.handling(pageNum);
  },
  handling(pageNum){
    if(pageNum) this.pageNum = pageNum
    this.$request.get('/repair/selectByPageStatusHandling',{
      params:{
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: this.status
      }
    }).then(res => {
      this.tableData = res.data.records
      this.total = res.data.total
    })
  },

  Handled(){
    this.loadByStatusHandled("已完成", 1);
  },
  loadByStatusHandled(status, pageNum){
    this.pageNum = pageNum;
    this.status = status;
    this.handled(pageNum);
  },
  handled(pageNum){
    if(pageNum) this.pageNum = pageNum
    this.$request.get('repair/selectByPageStatusHandled',{
      params: {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: this.status
      }
    }).then(res => {
      this.tableData = res.data.records
      this.total = res.data.total
    })
  },

  load(pageNum) {  // 分页查询
    if (pageNum)  this.pageNum = pageNum
    this.$request.get('/repair/selectByPage', {
      params: {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        phonenum: this.phonenum
      }
    }).then(res => {
      this.tableData = res.data.records
      this.total = res.data.total
    })
  },
  handleCurrentChange(pageNum) {
    this.load(pageNum)
  },

}
</script>

<style scoped>

</style>